<template>
    <div>
        <div class="user-body">
            <!--全部收益部分-->
            <div class="grad" @click="routeProceeds">
                <p class="p5" style="line-height: 1.6">
                    ￥ <span class="p6">{{ userCapital.earning }}</span>
                </p>
                <p class="p4">全部收益</p>
                <svg class="icon fillf" aria-hidden="true">
                    <use xlink:href="#icon-chevronright"></use>
                </svg>
            </div>
            <!--今日本曰收益-->
            <div class="sub">
                <div class="sub-i">
                    <p class="p1">￥{{ userCapital.day }}</p>
                    <p class="p2">今日业绩</p>
                </div>
                <div class="vertical"></div>
                <div class="sub-i">
                    <p class="p1 maic">￥{{ userCapital.month }}</p>
                    <p class="p2 maic">本月业绩</p>
                </div>
            </div>
            <div class="line"></div>
            <p class="use-re">{{ textIdentity }}</p>
            <div class="line-10"></div>
            <sprea-nav
                    text="我的二维码"
                    icon="#icon-wodeerweima"
                    color="#F5890A"
                    @click.native="routeCode"
                    v-show="userInfo.isextension"
            ></sprea-nav>
            <sprea-nav text="卡包"
                       icon="#icon-kabao"
                       color="#0097E1"
                       @click.native="routeCard"
                       v-show="userInfo.iscardbag"
            ></sprea-nav>
            <sprea-nav
                    text="排行榜"
                    icon="#icon-paihangbang"
                    color="#BF2071"
                    @click.native="routeRank"
            ></sprea-nav>
            <sprea-nav
                    text="未开通合伙人地区查询"
                    icon="#icon-weikaitonghehuorendi"
                    color="#F5890A"
                    @click.native="routeSearchArea"
            ></sprea-nav>
            <sprea-nav
                    text="我的客户"
                    icon="#icon-wodekehu"
                    color="#1996e1"
                    @click.native="routeCustomer"
            ></sprea-nav>
            <sprea-nav
                    text="地区代理申请"
                    icon="#icon-weikaitonghehuorendi"
                    color="#d55495"
                    @click.native="routeOpenArea"
                    v-show="canApply"
            ></sprea-nav>
            <sprea-nav
                    text="升级群主身份"
                    icon="#icon-weikaitonghehuorendi"
                    color="#F5890A"
                    @click.native="routeGroup"
                    v-show="userInfo.iscanbuygroup"
            ></sprea-nav>
            <div class="line-10"></div>
            <!--<sprea-nav-->
                    <!--text="同步身份"-->
                    <!--icon="#icon-tongbushenfen"-->
                    <!--color="#BF2071"-->
                    <!--@click.native="syncRole"-->
                    <!--v-show="userInfo.isshowsync"/>-->
            <sprea-nav
                    text="免费名额开通vip"
                    icon="#icon-mianfeimingekaitongv"
                    color="#F5890A"
                    v-if="userInfo.isshowvip"
                    @click.native="toAuthorize('vip')"
            ></sprea-nav>
            <sprea-nav
                    text="免费名额开通总代"
                    icon="#icon-mianfeimingekaitongz1"
                    color="#0097E1"
                    v-if="userInfo.isshowtop"
                    @click.native="toAuthorize('top')"
            ></sprea-nav>
            <sprea-nav
                    text="开通小号（限制）"
                    icon="#icon-kaitongxiaohao"
                    color="#BF2071"
                    @click.native="toAuthorize('sub')"
            ></sprea-nav>
<!--            <sprea-nav-->
<!--                    text="同步大号身份（限制）"-->
<!--                    icon="#icon-tongbudahaoshenfen"-->
<!--                    color="#F5890A"-->
<!--                    @click.native="syncParentRole"-->
<!--            ></sprea-nav>-->
        </div>
        <!--<qriously value="https://www.baidu.com" :size="200" />-->

        <confirm
                :title="alertMsg"
                :text="textConfirm"
                :isAlert="true"
                ref="alert"
                @confirm="conFirm"
        ></confirm>
        <confirm
                :title="alertMsg"
                :text="textConfirm1"
                :isAlert="false"
                ref="wechat"
                @cancel="weCancel"
                confirmBtnText="去设置"
                @confirm="weFirm"></confirm>
    </div>
</template>

<script>
    import spreaNav from '../../components/common/spreaNav';
    import API from '../../request/api';
    import {commonMixin} from '@/common/mixin';
    import Confirm from '@/components/common/confirm';

    export default {
        components: {spreaNav, Confirm},
        mixins: [commonMixin],
        data() {
            return {
                userCapital: {}, // 用户资金
                // textIdentity: '暂无推荐人' // 推荐人显示文本
                alertMsg: '提示',
                canApply: false,// 申请代理商资格默认没有
                textConfirm: '',
                level: 0,
                textConfirm1: '您还未设置过密码或密码已失效为了您的账户安全请先设置密码'
            };
        },
        computed: {
            userInfo() {
                return this.$store.state.login.userInfo;
            },
            textIdentity() {
                if (this.userInfo.showsup) {
                    return `${this.userInfo.showsupname}(推荐人${this.userInfo.showsup})`;
                } else {
                    return '暂无推荐人';
                }
            }
        },
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        created() {
            // 外层动画关闭
            // document.getElementById('img').style.display = 'none';
            this.showGlobaLoading();
            this.checkModify();
            this.request.get(API.userCapital).then(res => {
                this.userCapital = res;
                this.hideGlobaLoading();
            })
                .catch((err) => {
                    console.log(err);
                });
            this.request.get(API.canApply).then((res) => {
                if (res.status === 1) {
                    this.canApply = true;
                    this.level = res.level;
                    this.textConfirm = `您已达到${res.levelname}身份升级条件 请点击“地区代理申请”查看`;
                    this.$refs.alert.show();
                } else {
                    //    还不可以申请代理
                }
            });
        },
        methods: {
            checkModify() {
                this.request.get(API.ismodify, {
                    phone: this.userInfo.realphone,
                    system: this.userInfo.system_id
                }).then((res) => {
                    // 查看是否设置过密码
                    if (res.ismodify == 0) {
                        // 没修改过，弹窗
                        this.hideGlobaLoading();
                        this.$refs.wechat.show();
                    }
                });
            },
            weCancel() {
                // 下次再设置密码
                this.$router.back();
            },
            weFirm() {
                //  去设置密码
                this.$router.push({
                    name: 'phone',
                    query: {
                        type: '3',
                        state: true
                    }
                });
            },
            routeProceeds() {
                //    路由全部收益
                this.$router.push({
                    name: 'usercapital'
                });
            },
            routeRank() {
                //    排行榜跳转
                this.$router.push({
                    name: 'rank_list'
                });
            },
            routeCode() {
                //    路由二維碼
                this.$router.push({
                    name: 'personcode',
                    query: {
                        type: 'person'
                    }
                });
            },
            // syncRole() {
            //     this.request.get(API.syncRole).then(res => {
            //         this.alertMsg = res.msg;
            //         this.$refs.alert.show();
            //     });
            // },
            syncParentRole() {
                this.request.get(API.syncParentRole).then(res => {
                    this.alertMsg = res.msg;
                    this.$refs.alert.show();
                });
            },
            toAuthorize(type) {
                this.$router.push({
                    name: 'authorize',
                    params: {
                        type: type
                    }
                });
            },
            routeCard() {
                //    我的卡包
                this.$router.push({
                    name: 'cardbag'
                });
            },
            routeCustomer() {
                //    我的客户
                this.$router.push({
                    name: 'person_customer'
                });
            },
            conFirm() {
                //    申请代理商
                if (this.canApply) {
                    // alert(9999);
                }
            },
            routeSearchArea() {
                //    未开通合伙人地区查询
                this.$router.push({
                    name: 'area_search'
                });
            },
            routeOpenArea() {
                //     申请开通合伙人地区查询
                this.$router.push({
                    name: 'area_open',
                    query: {
                        level: this.level
                    }
                });
            },
            routeGroup() {
                //    升级群主身份,跳转微信支付
                this.request.post(API.buyGroup).then((res) => {
                    console.log(res, '飒飒打撒');
                    this.$store.commit('dataCreatePay', {
                        getWayData: {
                            target_id: res.target_id,
                            target_type: res.target_type
                        }
                    });
                    //    去创建支付
                    this.$router.replace({
                        name: 'pay-choose'
                    });
                });
            }
        },
        mounted() {
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .user-body {
        .mar {
            margin-bottom vw(10)
        }
        .grad {
            width 100vw
            height vw(110)
            flex-y(center)
            background main-liner
            .fillf {
                position absolute
                right vw(15)
            }
        }
        .sub {
            flex-x(space-between, stretch)
            background white
            .sub-i {
                height vw(54)
                flex 1
                flex-y(center)
                .p1 {
                    word-vw(word16, gray3)
                }
                .p2 {
                    word-vw(word14, gray3)
                }
                .maic {
                    color main-color
                }
            }
            .vertical {
                width 1px
                background gray5
            }
        }
        .use-re {
            width 100vw
            word-vw(word124, gray3)
            text-align center
            background white
            line-height vw(30)
            margin 0 auto
        }
    }
</style>
